<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);
  margin-bottom: 80px;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.form-operator-button {
  background-color: #fff;
  position: fixed;
  width: 100%;
  left: 0px;
  right: 0;
  bottom: 33px;
  height: 64px;
  line-height: 64px;
  text-align: right;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .05);
  z-index: 10;
}

.form-el-radion {
  line-height: 30px;
  padding: 5px 0px;
  width: 100%;
}

.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}

.hex-form-inf .hex-form-inf-content-show {
  padding: 0 4%;
  background-color: gainsboro;
  border-radius: 8px;
}
</style>
<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-card class="box-card" v-if="crud.optPageShow.listPage && isShowDetail === false">
        <div slot="header" class="clearfix">
          <span style="font-size: 14px">应用列表</span>
        </div>
        <!--工具栏-->
        <div class="head-container">
          <crudOperation :permission="permission"/>
        </div>
        <!--表格渲染-->
        <el-table border stripe ref="table" v-loading="crud.loading" :data="crud.data"
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                  row-key="id" @select="crud.selectChange" @select-all="crud.selectAllChange"
                  @selection-change="crud.selectionChangeHandler"
                  @filter-change="crud.handleFilterChange" @row-dblclick="goAppInfo" @cell-mouse-enter="showTooltip"
                  @cell-mouse-leave="hideTooltip"
                  :header-cell-style="{ background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }">
          <el-table-column type="selection" width="55"/>
          <el-table-column v-if="columns.visible('appCode')" :show-overflow-tooltip="true" label="应用编码" prop="appCode"/>
          <el-table-column v-if="columns.visible('appName')" :show-overflow-tooltip="true" label="应用名称" prop="appName"/>
          <el-table-column v-if="columns.visible('groupName')" :show-overflow-tooltip="true" label="应用组"
                           prop="groupName"/>
          <el-table-column v-if="columns.visible('resNum')" :show-overflow-tooltip="true" label="资源数" prop="resNum"/>
          <el-table-column v-if="columns.visible('concurrentNum')" :show-overflow-tooltip="true" label="并发数"
                           prop="concurrentNum"/>
          <el-table-column v-if="columns.visible('appSatus')" label="状态" align="center" prop="appSatus"
                           key="appSatus"
                           :filters="appStatusDict" :filter-method="filterEnabled"
                           filter-placement="bottom-end" :filter-multiple="false" column-key="appSatus">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.appSatus" :disabled="!checkPermission(['appInf:edit'])" active-value="0" inactive-value="1" active-color="#13ce66"
                         inactive-color="#F56C6C" @change="changeEnabled(scope.row, scope.row.appSatus)"/>
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('upUser')" :show-overflow-tooltip="true" label="修改人" prop="upUser"/>
          <el-table-column v-if="columns.visible('upTs')" :show-overflow-tooltip="true" label="修改时间" prop="upTs">
            <template slot-scope="scope">
              <!-- 悬浮提示 -->
              <el-tooltip
                placement="bottom-end"
                v-model="scope.row.showTooltip"
                :open-delay="500"
                effect="light"
                :disabled="!scope.row.showTooltip"
              >
                <!-- 注意 显示单元格浮框时 v-model 和 disabled 属性要一起使用才有效果 -->
                <div slot="content">双击当前行点开详情</div>
                <div>
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.upTs }}</span>
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card class="box-card" v-if="crud.optPageShow.addPage && isShowDetail === false" style="padding-bottom: 30px">
        <div slot="header" class="clearfix">
          <div class="el-page-header">
            <div class="el-page-header__left" @click="crud.goBack">
              <i class="el-icon-back"></i>
              <div class="el-page-header__title">返回</div>
            </div>
            <div class="el-page-header__content" style="font-size: 14px;"><b>应用编辑</b></div>
          </div>
        </div>
        <div class="dataFrom" v-if="crud.optPageShow.addPage">
          <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="160px">
            <el-col :span="4" style="height: 550px;padding: 30px 20px 60px 20px;">
              <el-steps direction="vertical" :active="active">
                <el-step title="基本信息">
                  <template slot="icon">
                    <img v-if="active>=1" src="@images/active.png" alt="" class="activepng">
                    <img v-else src="@images/noactive.png" alt="" class="activepng">
                  </template>
                </el-step>
                <el-step title="节点配置">
                  <template slot="icon">
                    <img v-if="active>=2" src="@images/active.png" alt="" class="activepng">
                    <img v-else src="@images/noactive.png" alt="" class="activepng">
                  </template>
                </el-step>
                <el-step title="自定义策略">
                  <template slot="icon">
                    <img v-if="active>=3" src="@images/active.png" alt="" class="activepng">
                    <img v-else src="@images/noactive.png" alt="" class="activepng">
                  </template>
                </el-step>
                <el-step title="管理员设置">
                  <template slot="icon">
                    <img v-if="active>=4" src="@images/active.png" alt="" class="activepng">
                    <img v-else src="@images/noactive.png" alt="" class="activepng">
                  </template>
                </el-step>
              </el-steps>
            </el-col>
            <el-col :span="20" style="padding: 30px;border-left: 1px solid #EBEEF5;min-height: 360px">
              <div v-if="active == 0">
                <el-row>
                  <el-col :span="15">
                    <el-form-item label="应用编码" prop="appCode">
                      <el-input v-model="form.appCode"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        唯一编码，大写英文字母加数字组成
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="crud.onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="15">
                    <el-form-item label="应用名称" prop="appName">
                      <el-input v-model="form.appName" maxlength="12" show-word-limit/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        唯一名称，节点名称不多于12位
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="crud.onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="15">
                    <el-form-item label="应用组" prop="groupCode">
                      <el-select filterable v-model="form.groupCode" clearable placeholder="请选择" style="width: 100%">
                        <el-option v-for="item in groupList" :key="item.groupCode" :label="item.groupName"
                                   :value="item.groupCode"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        应用分配到对应的应用组
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="crud.onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="15">
                    <el-form-item label="并发数" prop="concurrentNum">
                      <el-input-number v-model="form.concurrentNum" :min="1" :max="1000" style="width: 200px"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        应用上同时执行任务数阈值
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="crud.onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="15">
                    <el-form-item label="资源数" prop="resNum">
                      <el-input-number v-model="form.resNum" :min="1" :max="10000" style="width: 200px"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        应用上同时执行任务的资源数总和阈值
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="crud.onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="15">
                    <el-form-item label="分发策略" prop="dispatcherStrategyCode">
                      <el-radio-group v-model="form.dispatcherStrategyCode">
                        <el-radio class="form-el-radion" :label="1">按优先级顺序</el-radio>
                        <el-radio class="form-el-radion" :label="2">按优先级且资源数顺序,资源数由大到小</el-radio>
                        <el-radio class="form-el-radion" :label="3">按优先级且资源数顺序,资源数由小到大</el-radio>
                        <el-radio class="form-el-radion" :label="6">按时间最早先执行</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        等待分发的任务排序策略
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="crud.onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="15">
                    <el-form-item label="任务预计执行时长（秒）" prop="planExecDuration">
                      <el-input-number v-model="form.planExecDuration" :step="1" step-strictly max="1000000" :min="0"
                                       style="width: 200px"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        预估任务的执行时间
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="crud.onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="15">
                    <el-form-item label="任务超时时长（秒）" prop="overPlanDuration">
                      <el-input-number v-model="form.overPlanDuration" :step="1" step-strictly max="1000000" :min="0"
                                       style="width: 200px"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        允许任务超时最大时长
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="crud.onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="15">
                    <el-form-item label="任务出错间隔时间（秒）" prop="errDifferDuration">
                      <el-input-number v-model="form.errDifferDuration" :step="1" step-strictly max="1000000" :min="0"
                                       style="width: 200px"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        任务发送失败，重新发送时间间隔
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="crud.onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="15">
                    <el-form-item label="是否可分配资源" prop="isAssignRes">
                      <el-checkbox v-model="form.isAssignRes"></el-checkbox>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        应用管理员是否有权限修改并发数和资源数阈值
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="crud.onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="15">
                    <el-form-item label="应用描述" prop="appDesc">
                      <el-input v-model="form.appDesc" type="textarea" style="width: 100%;"
                                :autosize="{ minRows: 2, maxRows: 5}" placeholder="请输入内容"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        应用的描述信息
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="crud.onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>

                <div class="form-operator-button">
                  <el-button type="primary" @click="nextSetp1">下一步</el-button>
                </div>
              </div>
              <div v-if="active == 1">
                <el-row>
                  <el-col :span="15">
                    <el-form-item label="总资源数" prop="resNum">
                      <el-input v-model="form.resNum" :disabled="true"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        应用上同时执行任务数阈值
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="crud.onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="15">
                    <el-form-item label="总并发数" prop="concurrentNum">
                      <el-input v-model="form.concurrentNum" :disabled="true"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        应用上同时执行任务的资源数总和阈值
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="crud.onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="15">
                    <el-form-item label="每个节点的权重（%）" prop="nodes">
                      <div v-for="(node,i) in form.nodes" :key="i">
                        <div style="padding-bottom: 10px">
                          <el-select v-model="node.agentCode" filterable @change="selectNode(node)" placeholder="请选择">
                            <el-option v-for="item in nodeList" :key="item.label" :label="item.label"
                                       :value="item.value" :disabled="item.disabled">
                              <span style="float: left">{{ item.label }}</span>
                              <!--<span style="float: right; color: #8492a6; font-size: 13px;    padding: 0px 5px;">R-{{ item.maxResNum }}</span>-->
                              <!--<span style="float: right; color: #8492a6; font-size: 13px;    padding: 0px 5px;">C-{{ item.maxConNum }}</span>-->
                            </el-option>
                          </el-select>
                          <el-input-number v-model="node.agentWeight" :min="1" :max="100" style="margin: 0 10px"/>
                          <i class="el-icon-circle-plus-outline" style="margin: 0 5px;font-size: 20px"
                             @click="addNode()" data-status="off"></i>
                          <i class="el-icon-remove-outline" style="margin: 0 5px;font-size: 20px"
                             @click="deleteNode(node)" data-status="off"></i>
                        </div>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        每个节点执行任务的占比
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="crud.onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <div class="form-operator-button">
                  <el-button type="primary" @click="lastSetp">上一步</el-button>
                  <el-button type="primary" @click="nextSetp2">下一步</el-button>
                </div>
              </div>
              <div v-if="active == 2">
                <div v-for="(item,i1) in form.execStrategys" :key="i1">
                  <el-row>
                    <el-col :span="15">
                      <el-row>
                        <el-form-item :label="'自定义策略-'+ (i1+1)"></el-form-item>
                      </el-row>
                      <el-row>
                        <el-form-item label="时间段">
                          <el-time-select placeholder="起始时间" v-model="item.stHour"
                                          :picker-options="{start: '00:00',step: '01:00',end: '24:00'}"
                                          style="width: 35%"/>
                          <el-time-select placeholder="结束时间" v-model="item.endHour"
                                          :picker-options="{start: '00:00',step: '01:00:',end: '24:00',minTime: item.stHour}"
                                          style="margin-left: 10px;width: 35%"/>
                          <i class="el-icon-circle-plus-outline" style="margin: 0 5px;font-size: 20px"
                             @click="addExecStrategy()" data-status="off"></i>
                          <i class="el-icon-remove-outline" style="margin: 0 5px;font-size: 20px"
                             @click="deleteExecStrategy(i1)" data-status="off"></i>
                        </el-form-item>
                      </el-row>
                      <el-row>
                        <el-form-item label="资源数" prop="resNum">
                          <el-input-number v-model="item.resNum" :min="1" :max="10000"/>
                        </el-form-item>
                      </el-row>
                      <el-row>
                        <el-form-item label="并发数" prop="concurrentNum">
                          <el-input-number v-model="item.concurrentNum" :min="1" :max="1000"/>
                        </el-form-item>
                      </el-row>
                    </el-col>
                    <el-col :span="9" class="data_from_el-col">
                      <div class="hex-form-inf">
                        <div class="hex-form-inf-content">
                          给特定时间段设置并发数和资源数的阈值
                        </div>
                        <i
                          class="el-icon-info hex-form-inf-icon"
                          @click="crud.onOperInf($event)"
                          data-status="off"
                        ></i>
                      </div>
                    </el-col>
                  </el-row>
                </div>
                <div class="form-operator-button">
                  <el-button type="primary" @click="lastSetp">上一步</el-button>
                  <el-button type="primary" @click="nextSet3">下一步</el-button>
                </div>
              </div>
              <div v-if="active == 3">
                <el-row>
                  <el-col :span="15">
                    <el-form-item label="应用管理员" prop="appAdmin" style="padding-right: 20%">
                      <el-select v-model="form.appAdmin" filterable placeholder="请选择" style="width: 100%;">
                        <el-option v-for="item in adminList" :key="item.nickName" :label="item.label"
                                   :value="item.username"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        设置管理应用的管理员
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="crud.onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="15">
                    <el-form-item label="运维管理员" prop="delivery" style="padding-right: 20%">
                      <el-select v-model="form.devAdmins" filterable multiple placeholder="请选择" style="width: 100%;">
                        <el-option v-for="item in devAdminList" :key="item.username" :label="item.nickName"
                                   :value="item.username"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        运维管理员用于协助应用管理员运维
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="crud.onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="15">
                    <el-form-item label="监控管理员" prop="delivery" style="padding-right: 20%">
                      <el-select v-model="form.monitorAdmins" filterable multiple placeholder="请选择"
                                 style="width: 100%;">
                        <el-option v-for="item in monitorAdminList" :key="item.username" :label="item.nickName"
                                   :value="item.username"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        监控管理员用于协助应用管理员监控
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="crud.onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="15">
                    <el-form-item label="发布管理员" prop="delivery" style="padding-right: 20%">
                      <el-select v-model="form.releaseAdmins" filterable multiple placeholder="请选择"
                                 style="width: 100%;">
                        <el-option v-for="item in releaseAdminList" :key="item.username" :label="item.nickName"
                                   :value="item.username"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        发布管理员用于协助应用管理员发布
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="crud.onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <div class="form-operator-button">
                  <el-button type="primary" @click="lastSetp">上一步</el-button>
                  <el-button type="primary" :loading="disable" @click.native="toSubmit">完成</el-button>
                </div>
              </div>
            </el-col>
          </el-form>
        </div>
      </el-card>
      <app-detail v-if="isShowDetail" :crud-app-pk-id="crudAppPkId" />
    </div>
  </div>
</template>

<script>
import crudApp from '@/api/app/app'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import crudOperation from '@crud/extend/app/appInf/CRUD.operation'
import appDetail from './appDetail'
import checkPermission from '@/utils/permission' // 权限判断函数

// crud交由presenter持有
const queryList = [{'cloumValue': 'appCode', 'cloumName': '应用编码'}, {'cloumValue': 'appName', 'cloumName': '应用名称'}]
const defaultCrud = CRUD({title: '应用', url: '/api/appDef/selectPages', queryList: queryList, crudMethod: {...crudApp}})
const defaultForm = {
  pkId: null,
  appCode: null,
  appName: null,
  concurrentNum: 1,
  resNum: 1,
  planExecDuration: "60",
  appDesc: null,
  dispatcherStrategyCode: 1,
  isAssignRes: false,
  overPlanDuration: '600',
  errDifferDuration: '0',
  groupCode: null,
  groupName: null,
  nodes: [{agentCode: null, agentWeight: 100}],
  execStrategys: [],
  appAdmin: null,
  releaseAdmins: [],
  monitorAdmins: [],
  devAdmins: []
}
export default {
  name: 'app',
  components: {crudOperation, appDetail},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ['app_status'],
  data() {
    let checkAppData = (rule, value, callback) => {
      var util = {
        isFigure: function (e) {
          return /^[0-9A-Z_|]+$/.test(e);
        }
      }
      if (value == null) {
        value = '';
      }
      let isCorrect = true;
      if (!util.isFigure(value))
        isCorrect = false;
      if (rule.field === 'appCode') {
        if (value.split(" ").join("").length == 0) {
          callback(new Error("应用编码不能为空字符串！"));
        } else if (isCorrect == false) {
          callback(new Error("只能输入大写英文字母、下划线、分隔符或数字！"));
        } else {
          this.checkAppData(value, rule.field);
          setTimeout(() => {
            if (this.validCodeStatus) {
              callback();
            } else {
              callback(new Error("应用编码已存在"));
            }
          }, 1000);
        }
      } else if (rule.field === 'appName') {
        if (value.split(" ").join("").length == 0) {
          callback(new Error("应用名称不能为空字符串！"));
        } else {
          this.checkAppData(value, rule.field);
          setTimeout(() => {
            if (this.validNameStatus) {
              callback();
            } else {
              callback(new Error("应用名称已存在"));
            }
          }, 1000);
        }
      }
    }
    return {
      active: 0,
      isShowDetail: false,
      crudAppPkId: null,
      groupList: [],
      nodeList: [],
      adminList: [],
      devAdminList: [],
      monitorAdminList: [],
      releaseAdminList: [],
      disable: false,
      appDict: [],
      appStatusDict: [],
      permission: {
        add: ['appInf:add'],
        edit: ['appInf:edit'],
        del: ['appInf:del']
      },
      rules: {
        appCode: [
          {required: true, message: '请输入应用编码', trigger: 'blur'},
          {validator: checkAppData, trigger: 'blur'}
        ],
        appName: [
          {required: true, message: '请输入应用名称', trigger: 'blur'},
          {validator: checkAppData, trigger: 'blur'},
          {min: 0, max: 15, message: '长度不可超过15个字符', trigger: 'blur'},
        ],
        appAdmin: [
          {required: true, message: '请选择应用管理员', trigger: 'change'},
        ],
        nodes: [
          {required: true, message: '请选择节点', trigger: 'blur'},
        ],
        resNum: [
          {required: true, message: '请输入资源数', trigger: 'blur'},
        ],
        concurrentNum: [
          {required: true, message: '请输入并发数', trigger: 'blur'},
        ],
        groupCode: [
          {required: true, message: '请选择应用组', trigger: 'change'},
        ],
        dispatcherStrategyCode: [
          {required: true, message: '请选择分发策略', trigger: 'change'},
        ],
        planExecDuration: [
          {required: true, message: '请输入任务预计执行时长（秒）', trigger: 'change'},
        ],
        overPlanDuration: [
          {required: true, message: '请输入任务超时时长（秒）', trigger: 'change'},
        ],
        errDifferDuration: [
          {required: true, message: '请输入任务出错间隔时间（秒）', trigger: 'change'}
        ],
      },
    }
  },
  created() {
    this.active = 0;
    this.crud.optPageShow.listPage = true;
    this.crud.optPageShow.addPage = false;
    this.crud.selections.length = 0;
    this.appDict = this.dict.app_status;
  },
  watch: {
    appDict() {
      this.$nextTick(() => {
        this.appDict.forEach(item => {
          var obj = {
            text: item.label,
            value: item.value
          }
          this.appStatusDict.push(obj)
        })
      })
    }
  },
  methods: {
    checkPermission,
    //进入时显示提示框
    showTooltip(row) {
      //需要显示浮框的条件
      //if (row.filterFlag) {
      row.showTooltip = true;
      //}
    },
    //退出时隐藏提示框
    hideTooltip(row) {
      row.showTooltip = false;
    },
    goAppInfo(row, column, event) {
      this.crudAppPkId = row.pkId
      this.isShowDetail = true
    },
    showAppDetail(appInfo) {
      this.$router.push({name: 'app360', params: {appInfo: appInfo}})
    },
    // 新增应用前
    [CRUD.HOOK.beforeToAdd](crud) {
      this.active = 0;
      this.qryGroupCode();
      this.qryNodeInfo();
      this.toInitUserByRole();
    },
    // 编辑应用前
    [CRUD.HOOK.beforeToEdit](crud) {
      this.active = 0;
      this.getEditInf(crud.form.pkId);
      this.qryGroupCode();
      this.qryNodeInfo(crud.form.appCode);
      this.toInitUserByRole();
    },
    toInitUserByRole() {
      this.findUserByRole('104');
      this.findUserByRole('109');
      this.findUserByRole('110')
      this.findUserByRole('111');
    },
    //crud.submitCU
    toSubmit() {
      let pkId = this.form.pkId;
      if (pkId != null && pkId != '') {
        this.edit();
      } else {
        this.add();
      }
    },
    edit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.disable = true;
          crudApp.edit(this.form).then(res => {
            if (res) {
              this.disable = false;
              this.crud.resetForm();
              this.crud.selections.length = 0;
              this.crud.optPageShow.listPage = true;
              this.crud.optPageShow.addPage = false;
              this.crud.status.edit = CRUD.STATUS.NORMAL;
              this.crud.refresh();
              this.$notify({title: '成功', message: '修改成功', type: 'success'});
            } else {
              this.$notify({title: '修改失败', message: '修改失败', type: 'warning'});
            }
          })
        }
      })
    },
    add() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.disable = true;
          crudApp.add(this.form).then(res => {
            if (res) {
              this.disable = false;
              this.crud.resetForm();
              this.crud.optPageShow.listPage = true;
              this.crud.optPageShow.addPage = false;
              this.crud.status.add = CRUD.STATUS.NORMAL;
              this.crud.refresh();
              this.$notify({
                title: '成功',
                message: '添加成功',
                type: 'success'
              });
            } else {
              this.$notify({title: '添加失败', message: '添加失败', type: 'warning'});
            }
          })
        }
      })
    },
    //获取修改应用信息
    getEditInf(pkId) {
      crudApp.getEdit(pkId)
        .then(response => {
          this.form.dispatcherStrategyCode = parseInt(response.dispatcherStrategyCode);
          this.form.isAssignRes = ('true' == response.isAssignRes) ? true : false;
          this.form.nodes = response.nodes;
          this.form.groupCode = response.groupCode;
          this.form.execStrategys = response.execStrategys;
          this.form.devAdmins = response.devAdmins;
          this.form.monitorAdmins = response.monitorAdmins;
          this.form.releaseAdmins = response.releaseAdmins;
        })
        .catch(error => {
          this.$notify({title: '信息获取失败', message: error, type: 'warning'});
        })
    },
    //查询管理员
    findUserByRole(roleId) {
      crudApp.findUserByRole(roleId)
        .then(response => {
          if ('104' == roleId) {
            this.adminList = response
          }
          if ('109' == roleId) {
            this.devAdminList = response
          }
          if ('110' == roleId) {
            this.monitorAdminList = response
          }
          if ('111' == roleId) {
            this.releaseAdminList = response
          }
        })
        .catch(error => {
          this.$notify({title: '信息获取失败', message: error, type: 'warning'});
        })
    },
    //查询节点
    qryNodeInfo(appCode) {
      crudApp.qryNodeInfo(appCode).then(response => {
        this.nodeList = response
      })
        .catch(error => {
          this.$notify({title: '信息获取失败', message: error, type: 'warning'});
        })
    },
    //查询应用组编码
    qryGroupCode() {
      crudApp.qryGroupCode()
        .then(response => {
          this.groupList = response
        })
        .catch(error => {
          this.$notify({title: '信息获取失败', message: error, type: 'warning'});
        })
    },
    // 改变状态
    changeEnabled(data, val) {
      this.$confirm('此操作将 "' + this.dict.app_status[val].label + '" 【' + data.appName + '】, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        data.appSatus = data.appSatus;
        crudApp.editAppSatus(data.appSatus, data.appCode)
          .then(response => {
            this.$notify({title: '成功', message: '状态修改成功', type: 'success'});
          })
          .catch(error => {
            this.$notify({title: '状态修改失败', message: error, type: 'error'});
          })
      }).catch(() => {
        data.appSatus = (data.appSatus == '0') ? '1' : '0'
      })
    },
    //节点配置-添加节点
    addNode() {
      let nodesLength = this.form.nodes.length + 1;
      if (nodesLength > 20) {
        this.$notify({title: '警告', message: '最多20个节点', type: 'warning'});
        return
      }
      this.form.nodes.forEach(item => {
        item.agentWeight = Math.floor(100 / nodesLength);
      })
      let nodeForm = {agentCode: null, agentWeight: Math.ceil(100 / nodesLength)};
      this.form.nodes.push(nodeForm);
    },
    //节点配置-删除节点
    deleteNode(data) {
      if (this.form.nodes.length === 1) {
        this.$notify({title: '警告', message: '至少需要选择一个节点！', type: 'warning'});
        return
      }
      this.form.nodes.splice(this.form.nodes.indexOf(data), 1);
      this.nodeList.forEach(item => {
        if (item.value.indexOf(data.agentCode) != -1) {
          item.disabled = false;
        }
      })
    },
    //策略列表-添加策略
    addExecStrategy() {
      let execStrategyFrom = {
        stHour: null,
        endHour: null,
        resNum: this.form.resNum,
        concurrentNum: this.form.concurrentNum
      };
      this.form.execStrategys.push(execStrategyFrom);
    },
    //策略列表-删除策略
    deleteExecStrategy(index) {
      this.form.execStrategys.splice(index, 1);
    },
    // 下一步
    nextSetp() {
      this.active++;
    },
    //基本信息下一步操作，要求验证基本信息的合法性
    nextSetp1() {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        this.nextSetp();
      })
    },
    //删除节点列表中的空选项
    clearNodesNull() {
      let newNodes = [];
      this.form.nodes.forEach(item => {
        if (item.agentCode != null && item.agentCode != '') {
          newNodes.push(item);
        }
      })
      this.form.nodes = newNodes;
      if (this.form.nodes.length == 0) {
        this.addNode();
      }
    },
    //节点配置下一步操作，必须至少选择一个节点，并验证节点的权重
    nextSetp2() {
      this.clearNodesNull();
      let validRes = true;
      let agentWeight = 0;
      //判断分配的节点权重是否超出节点空余权重
      this.form.nodes.forEach((item, index) => {
        agentWeight += item.agentWeight;
        if (item.agentCode == null || item.agentCode == '') {
          this.$notify({title: '警告', message: '至少需要选择一个节点！', type: 'warning'});
          validRes = false;
        }
      })
      if (agentWeight != 100) {
        this.$notify({title: '警告', message: '应用权重总值必须为100', type: 'warning'});
        validRes = false;
      }
      if (validRes) {
        if (this.form.execStrategys.length < 1) {
          this.addExecStrategy();
        }
        this.nextSetp();
      }
    },
    nextSet3() {
      let validRes = true;
      let i = 0;
      //判断分配的节点权重是否超出节点空余权重
      this.form.execStrategys.forEach((item, index) => {
        if (item.stHour == null || item.stHour == '') {
          this.$notify({
            title: '警告',
            offset: (i++ * 100),
            message: '自定义策略-' + (index + 1) + '开始时间不能为空',
            type: 'warning'
          });
          validRes = false;
        }
        if (item.endHour == null || item.endHour == '') {
          this.$notify({
            title: '警告',
            offset: (i++ * 100),
            message: '自定义策略-' + (index + 1) + '结束时间不能为空',
            type: 'warning'
          });
          validRes = false;
        }
      })
      if (validRes) {
        this.active++;
      }
    },
    //上一页
    lastSetp() {
      this.active--;
    },
    //完成
    finish() {
      this.crud.goBack();
    },
    filterEnabled(value, row) {
      return row.appSatus === value;
    },
    //当节点选择发生改变是，把选择的节点设置为不可选择，并判断权重是否超出
    selectNode(node) {
      let i = 0;
      this.nodeList.forEach(item => {
        item.disabled = this.checkNodeHasSelect(item.value);
        if (item.value.indexOf(node.value) != -1) {
          item.disabled = true;
        }
      })
      /* this.checkInputNumValue(node,i);*/
    },
    //判断节点是否已选择，选择的节点设置为不可选
    checkNodeHasSelect(value) {
      let hasSelect = false;
      this.form.nodes.forEach(item => {
        if (item.agentCode == value) {
          hasSelect = true;
        }
      })
      return hasSelect;
    },
    // 判断应用编码或应用名称是否重复
    checkAppData(value, field) {
      let param = {};
      let result = false;
      //调用后台接口判断是否重复
      param[field] = value;
      param["pkId"] = this.form.pkId;
      crudApp.checkAppData(param).then(res => {
        if ('appCode' === field) {
          this.validCodeStatus = res;
        } else {
          this.validNameStatus = res;
        }
      })
    },
    goBack(){
      this.isShowDetail = false
    }
  }
}
</script>
